<template>
	<view class="control">
		<view class="con-1 flex-space-between">
			<view class="flex-align">
				<van-image round width="100rpx" height="100rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<view class="info">
					<view class="name">王大锤</view>
					<view class="time">2020-08-10 15:45:45</view>
				</view>
			</view>
			<view class="class">暑期游泳班</view>
		</view>
		<view class="section flex-align">
			<!-- <image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/36be1ae509e1b7a9d97d46705f645bd358825861.png" /> -->
			审批详情
		</view>
		<view class="con-2">
			<view class="item flex-space-between">
				<view class="label">审批课程</view>
				<view class="value">游泳暑期课程</view>
			</view>
			<view class="item flex-space-between">
				<view class="label">审批课节</view>
				<view class="value">第二节 游泳的基本认知</view>
			</view>
			<view class="item flex-space-between">
				<view class="label">审批时间</view>
				<view class="value">2021/12/15 12:00:00</view>
			</view>
			<view class="item flex-space-between">
				<view class="label">审批备注</view>
				<view class="value">身体不适</view>
			</view>
		</view>
		<view class="section flex-align">
			<!-- <image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/90ce57fb9d1487c5d2afa0c40abe9c3fedff1429.png" /> -->
			审批进程
		</view>
		<view class="con-3">
			<view class="item flex-space-between">
				<view class="flex-align">
					<view class="image">
						<van-image width="60rpx" height="60rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
						<van-icon name="checked" size="25rpx" color="#ff0000" />
					</view>
					<view>
						<view class="name">王大锤</view>
						<view class="time">2020-05-30 12:23</view>
					</view>
				</view>
				<view class="state">提交审批</view>
			</view>
			<view class="item flex-space-between" v-for="item in 2" :key="item">
				<view class="flex-align">
					<view class="image">
						<!-- round -->
						<van-image width="60rpx" height="60rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
						<van-icon name="more" size="25rpx" color="#00cc66" />
					</view>
					<view>
						<view class="name">王大锤{{show}}</view>
						<view class="time">2020-05-30 12:23</view>
					</view>
				</view>
				<view class="state await">待审批</view>
			</view>
		</view>

		<view class="footer flex-space-between">
			<view class="btn flex-center" @click="openAlert(0)">驳回</view>
			<view class="btn success flex-center" @click="openAlert(1)">通过</view>
		</view>

		<config-alert title="驳回" v-model="show" @confirm="confirm1"></config-alert>
		<config-alert title="通过" v-model="show2" @confirm="confirm2"></config-alert>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, //驳回
				show2: false, //通过
				note: '',
			}
		},
		methods: {
			confirm() {
				this.show = false
			},
			openAlert(index) {
				if (index === 0) {
					this.show = true
				} else {
					this.show2 = true
				}
			},
			confirm1() {
				this.show = false
			},
			confirm2(data) {
				console.log(data);
				this.show2 = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		min-height: 100vh;
		padding-bottom: 100rpx;

		.con-1 {
			padding: 20rpx 25rpx;
			margin-top: 20rpx;
			align-items: flex-end;

			.info {
				margin-left: 25rpx;

				.name {
					color: #333333;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 700;
				}

				.time {
					olor: #999999;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					margin-top: 13rpx;
				}
			}

			.class {
				color: #999999;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				transform: translateY(-10rpx);
			}
		}

		.section {
			padding: 17rpx 30rpx 18rpx;
			background-color: #f3f3f3;
			color: #4BA677;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 700;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 15rpx;
			}
		}

		.con-2 {
			padding: 39rpx 29rpx;

			.item {
				margin-bottom: 39rpx;

				&:last-of-type {
					margin-bottom: 0;
				}

				.name {
					color: #333333;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.value {
					color: #999999;
					font-size: 28rpx;
					font-family: PingFang SC;
				}
			}
		}

		.con-3 {
			padding: 39rpx 29rpx;

			.item {
				margin-bottom: 55rpx;
				position: relative;

				&:last-of-type {
					margin-bottom: 0;

					.image:after {
						display: none;
					}
				}

				.image {
					position: relative;
					margin-right: 20rpx;

					/deep/ .van-icon {
						position: absolute;
						right: 0;
						bottom: 0;
					}

					&::after {
						content: '';
						display: block;
						background-color: #a6a6a6;
						width: 5rpx;
						height: 55rpx;
						left: 0;
						right: 0;
						margin: auto;
						position: absolute;
					}
				}

				.name {
					color: #333333;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.time {
					margin-top: 5rpx;
					color: #bebebe;
					font-size: 22rpx;
					font-family: PingFang SC
				}

				.state {
					color: #ff0000;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.await {
					color: #04b35a;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 30rpx;
			padding: 0px 30rpx;
			width: 100%;

			.btn {
				width: 49%;
				background-color: #ffffff;
				border-radius: 40rpx;
				height: 80rpx;
				border: solid 1rpx #4BA677;
				color: #4BA677;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 700;
			}

			.success {
				color: #ffffff;
				border: none;
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%);
			}
		}
	}
</style>